<!--安全监管-->
<template>
    <div class="leftView">
        <div class="shrink" @click="shows=!shows"></div>
        <transition name="animationLR">
            <div v-show="shows" style="display: flex;flex-direction: column">
                <div class="container height294"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_title3">
                        <span>告警列表</span>
                    </div>
                    <div class="container_table">
                        <div class="container_table_header">
                            <div style="width: 30%">事件标题</div>
                            <div style="width: 40%">告警时间</div>
                            <div style="width: 30%">处理状态</div>
                        </div>
                        <div class="container_table_subject userFlex" ref="tableContainer" @mouseenter="stopAutoScroll" @mouseleave="startAutoScroll">
                            <div
                                    class="container_table_subject_line"
                                    v-for="(item, i) in tableList"
                                    :key="i"
                            >
                                <div style="width: 30%">{{ item.alarmTypeName }}</div>
                                <div style="width: 40%">{{ item.createTime }}</div>
                                <div class="container_table_subject_line_status">
                                    <div class="container_table_subject_line_status_circle" style="width: 50%"
                                         :style="{backgroundColor: item.alarmStat === '2' ? '#37F447' : item.alarmStat === '1' ? '#F64347' : '#0000FF'}"
                                    ></div>
                                    <div style="width: 80%;">{{ item.alarmStat === '1' ? '未处理' : '已处理' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container height273"
                     :style="{'background-image':`url(${require('@/assets/bg_left1.png')})`}">
                    <div class="container_title3">
                        <span>年度告警个数</span>
                        <el-dropdown size="small" split-button type="primary" @command="handleDropdownCommand">
                            {{ selectedYear }}
                            <el-dropdown-menu slot="dropdown" class="ulBox2">
                                <el-dropdown-item :command="item" v-for="item in yearSelectList" :key="item">{{
                                    item
                                    }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div class="container_lineBox" ref="electricityChart"></div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import * as echarts from "echarts";
import {deviceAlarmPageList, yearAlarmChartsData} from "@/api/safety/axios";

export default {
    name: "floatLeft",
    data() {
        return {
            //年份数组
            yearSelectList: [],
            shows: true,
            selectedYear: new Date().getFullYear(), // 初始选择的年份
            // 告警列表统计
            tableList: [],
            scrollSpeed: 70, // 调整滚动速度，数值越小滚动越快
            scrollInterval: null,
        }
    },
    mounted() {
        this.getYearList();
        //年度告警个数
        this.initElectricity();
        this.getAlarmPageList();
        this.startAutoScroll();
    },
    beforeDestroy() {
        this.stopAutoScroll(); // 组件销毁前停止滚动
    },
    methods: {
        stopAutoScroll() {
            clearInterval(this.scrollInterval);
        },
        startAutoScroll() {
            this.stopAutoScroll(); // 首先停止任何现有的滚动
            const container = this.$refs.tableContainer;
            const containerHeight = container.clientHeight;
            const contentHeight = container.scrollHeight;
            let scrollTop = 0;
            const scroll = () => {
                scrollTop += 1;
                if (scrollTop >= contentHeight) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            };
            this.scrollInterval = setInterval(scroll, this.scrollSpeed);
        },
        // 获取上下3年的数组
        getYearList() {
            let myDate = new Date();
            let startYear = myDate.getFullYear() - 3;//起始年份
            let endYear = myDate.getFullYear() + 3;//结束年份
            let arr = [];
            for (let i = startYear; i <= endYear; i++) {
                arr.push(i);
            }
            this.yearSelectList = arr;

        },
        // 左侧告警列表
        getAlarmPageList() {
            console.log('左侧告警列表')
            deviceAlarmPageList().then(res => {
                const {records} = res.data
                this.tableList = records;
                console.log(this.tableList,'左侧告警列表')
            })
        },
        //年度告警个数
        initElectricity() {
            this.chartInstance = echarts.init(this.$refs.electricityChart);
            this.updateChart()
        },
        async updateChart() {
            const {selectedYear, chartInstance} = this;
            // this.tableList
            let resultData = await yearAlarmChartsData({year: selectedYear});
            console.log(resultData, '根据选择的年份更新图表数据')
            let seriesData = resultData.data.map(i => {
                return i.count
            });
            const option = {
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(34, 40, 46, 0.7)',
                    borderWidth: "0", //边框宽度设置1
                    borderColor: "", //设置边框颜色
                    textStyle: {
                        color: '#fff',
                    },
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(0, 255, 233,0)'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(255, 255, 255,1)',
                                }, {
                                    offset: 1,
                                    color: 'rgba(0, 255, 233,0)'
                                }],
                                global: false
                            }
                        },
                    },
                },
                grid: {
                    top: '15%',
                    left: '20%',
                    right: '2%',
                    bottom: '15%',
                    // containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    axisLine: {
                        show: false,
                        color: '#FFFFFF'
                    },

                    axisLabel: {
                        color: '#FFFFFF',
                        width: 100
                    },
                    splitLine: {
                        show: false
                    },
                    boundaryGap: false,
                    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月",] //this.$moment(data.times).format("HH-mm") ,

                }],
                yAxis: [{
                    type: 'value',
                    name: "单位(个)",
                    nameTextStyle: {
                        padding: [0, 0, 0, -60], // 上右下左
                        color: "rgba(255, 255, 255, 0.80)"
                    },
                    splitNumber: 4,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#FFFFFF',
                            opacity: 0.23
                        }
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        margin: 20,
                        textStyle: {
                            color: '#fff',

                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [
                    {
                        name: '年度告警个数',
                        type: 'line',
                        showAllSymbol: true,
                        symbol: 'circle',
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                width: 3,
                                color: "rgba(98, 183, 255, 1)",
                            },
                        },
                        label: {
                            show: false,
                            position: 'top',
                            textStyle: {
                                color: '#2CABE3',
                            }
                        },
                        itemStyle: {
                            color: "#fff",
                            borderColor: "#2CABE3",
                            borderWidth: 0,
                        },

                        data: seriesData //data.values
                    },
                ]
            };
            chartInstance.setOption(option);
        },
        handleDropdownCommand(command) {
            this.selectedYear = command; // 更新选择的年份
            this.updateChart();
            console.log(this.selectedYear, "年份")
        },


    }
}
</script>


<style lang="scss">
.height230 {
  width: 280px;
  height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .el-scrollbar__thumb {
    background-color: #189DC5;
  }

  .el-scrollbar__bar {
    &.is-vertical {
      width: 2px; //滚动条宽度
    }
  }
}

.container {
  .el-dropdown .el-button-group {
    height: 20px;

    .el-button--primary {
      background: rgba(98, 183, 255, 0.2);
      box-shadow: inset 0px 0px 12px 0px #62B7FF;
      border: 1px solid #62B7FF;
    }
  }
}

.ulBox2 {
  width: 85px !important;
  height: 50px;
  color: #fff;
  background: #082048;
  box-shadow: inset 0px 0px 12px 0px #62B7FF;
  border: 1px solid #62B7FF;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .height230 {
    height: calHeight_2k(230px);

    .el-scrollbar__wrap {
    }

    .el-scrollbar__thumb {
    }

    .el-scrollbar__bar {
      &.is-vertical {
      }
    }
  }
  .container {
    .el-dropdown .el-button-group {
      height: calHeight_2k(20px)
    }
  }
  .ulBox2 {
    height: calHeight_2k(50px)
  }
}
</style>
<style lang="scss" scoped>
.minHeight12 {
  min-height: 12px;
  margin-bottom: 5px;
}

.height294 {
  width: 450px;
  height: 360px;
}

.height273 {
  width: 450px;
  height: 238px;
}


.leftView {
  float: left;
  display: flex;
  flex-direction: row;
  height: 630px;
  margin-top: 20px;
  align-items: center;
  position: relative;
  z-index: 3;
    cursor: pointer;

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink.png");
  }

  .container {
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;

    &-titleBgc {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      margin-top: 10px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title.png");
    }

    &_table {
      width: 400px;
      height: 283px;
      margin-top: 5px;
      margin-left: 22px;
      font-size: 14px;
      font-family: Noto Sans SC-Medium, Noto Sans SC;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);

      &_header {
        width: 100%;
        height: 20px;
        background: rgba(98, 183, 255, 0.2);
        display: flex;
        justify-content: space-between;
        text-align: center;
        line-height: 20px;

        div {
          width: 20%;
        }
      }

      &_subject {
        width: 100%;
        height: 250px;

        &_line {
          width: 100%;
          height: 30px;
          margin-top: 8px;
          margin-bottom: 8px;
          line-height:15px;
          display: flex;
          justify-content: space-between;
          text-align: center;
            align-items: center;

          div {
            width: 20%;
          }

          &_status {
            width: 30%;
            display: flex;
            //justify-content: space-around;
            align-items: center;
            margin: 0 auto;

            &_circle {
              width: 6px !important;
              height: 6px !important;
              background: #37F447;
              border-radius: 4px;
              margin-left: 10px;
            }
          }
        }
      }
    }

    &-listBox {
      width: 336px;
      height: 58px;
      margin-left: 22px;
      margin-top: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &-bayonetBox {
        width: 131px;
        height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-bayonetIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_bayonet.png");
        }

        &-monitorinIcon {
          width: 58px;
          height: 58px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_monitoring.png");
        }

        &-dataFont {
          font-size: 22px;
          font-family: D-DIN-DIN-Bold, D-DIN-DIN;
          font-weight: bold;
          background: linear-gradient(180deg, #FFFFFF 19%, #23A5F7 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        &-textFont {
          font-size: 14px;
          font-family: Noto Sans SC-Regular, Noto Sans SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.8);
        }
      }

    }

    &_lineBox {
      width: 418px;
      height: 136px;
      margin-top: 10px;
    }

    &-line {
      width: 400px;
      height: 3px;
      margin-left: 22px;
      margin-top: 10px;
      margin-bottom: 9px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_fenge.png");
    }

    &-vehicleChat {
      width: 400px;
      height: 147px;
      margin-left: 22px;
    }

    &_title1 {
      width: 216px;
      height: 24px;
      margin-top: 30px;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 22px;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_title1.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_title3 {
      width: 400px;
      height: 24px;
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      margin-left: 20px;
        background-size: 100% 100%;
        background-image: url("@/assets/bg_title3.png");

      span {
        height: 24px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 24px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

    }

    &_policy {
      width: 222px;
      height: 52px;
      padding-left: 10px;
      margin-top: 8px;
      margin-left: 22px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-size: 100% 100%;
      background-image: url("@/assets/bg_policy.png");

      &_name {
        height: 15px;
        font-size: 9px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis; /*超出部分省略号表示*/
        white-space: nowrap; /*强制单行显示*/
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #1CFDFF;
        line-height: 15px;
      }

      &_types {
        display: flex;;
        flex-direction: row;
        min-height: 12px;
      }

      &_type {
        margin-bottom: 5px;
        width: 48px;
        display: block;
        height: 12px;
        margin-right: 5px;
        font-size: 7px;
        text-align: center;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 12px;
      }

      &_bg1 {
        background: linear-gradient(270deg, rgba(226, 80, 63), rgba(231, 10, 91));
      }

      &_num {
        height: 6px;
        font-size: 6px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 6px;
      }
    }
  }
}

.industrialChainStyle {
  margin-left: 5%;
  width: 90%;
  height: 240px;
}

.industryStyle {
  width: 100%;
  height: 224px;
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;
  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }
  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }
  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }
  .minHeight12 {
    min-height: calHeight_2k(12px);
    margin-bottom: calHeight_2k(5px);
  }

  .height294 {
    height: calHeight_2k(360px);
  }

  .height273 {
    height: calHeight_2k(238px);
  }


  .leftView {
    margin-top: calHeight_2k(20px);
    height: calHeight_2k(630px);

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {
      &-titleBgc {
        height: calHeight_2k(3px);
        margin-top: calHeight_2k(10px);
      }

      &_table {
        height: calHeight_2k(283px);
        margin-top: calHeight_2k(5px);

        &_header {
          height: calHeight_2k(20px);
          line-height: calHeight_2k(20px);
        }

        &_subject {
          height: calHeight_2k(250px);

          &_line {
            height: calHeight_2k(30px);
            margin-top: calHeight_2k(8px);
            margin-bottom: calHeight_2k(8px);
            line-height: calHeight_2k(15px);
          }
        }
      }

      &-listBox {
        height: calHeight_2k(58px);
        margin-top: calHeight_2k(14px);

        &-bayonetBox {
          height: calHeight_2k(58px);

        }
      }

      &_lineBox {
        height: calHeight_2k(136px);
      }

      &-line {
        margin-top: calHeight_2k(10px);
        margin-bottom: calHeight_2k(9px);
      }

      &-vehicleChat {
        height: calHeight_2k(147px);
      }

      &_title1 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(30px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_title3 {
        height: calHeight_2k(24px);
        margin-top: calHeight_2k(15px);

        span {
          height: calHeight_2k(24px);
          line-height: calHeight_2k(24px);
        }

      }

      &_policy {
        height: calHeight_2k(52px);
        margin-top: calHeight_2k(8px);

        &_name {
          height: calHeight_2k(15px);
          line-height: calHeight_2k(15px);
        }

        &_types {
          min-height: calHeight_2k(12px);
        }

        &_type {
          width: calHeight_2k(48px);
          margin-bottom: calHeight_2k(5px);
          height: calHeight_2k(12px);
          line-height: calHeight_2k(12px);
        }

        &_bg1 {
        }

        &_num {
          height: calHeight_2k(6px);
          line-height: calHeight_2k(6px);
        }
      }
    }
  }

  .industrialChainStyle {
    height: calHeight_2k(240px);
  }

  .industryStyle {
    height: calHeight_2k(224px);
  }
}
</style>
